<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>折线图</title>
  <link rel="stylesheet" href="./assets/common.css">
  <style>
    #mountNode {
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
<div>
  <canvas id="mountNode"></canvas>
  <div>
    <button id='one'>近 1 月</button>
    <button id='three'>近 3 月</button>
    <button id='six'>近 6 月</button>
    <button id='oneYear'>近 1 年</button>
    <!-- <button id='threeYear'>近 3 年</button> -->
  </div>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
  const G = F2.G;
  const Util = F2.Util;

let data;
let oneMonth;
let threeMonth;
let sixMonth;
let oneYear;
let chart;

let lastData;

let isForward = false; // 判断下时序

$('#one').click(e => {
  const one = data.slice(oneMonth);
  isForward = (one.length > lastData.length);
  lastData = one;
  chart.scale('reportDateTimestamp', {
    type: 'timeCat',
    mask: 'MM-DD'
  });
  chart.changeData(one);

});

$('#three').click(e => {
  const three  = data.slice(threeMonth);
  isForward = (three.length > lastData.length);
  lastData = three;
  chart.scale('reportDateTimestamp', {
    type: 'timeCat',
    mask: 'YYYY-MM'
  });
  chart.changeData(three);

});

$('#six').click(e => {
  const six  = data.slice(sixMonth);
  isForward = (six.length > lastData.length);
  lastData = six;
  chart.scale('reportDateTimestamp', {
    type: 'timeCat',
    mask: 'YYYY-MM'
  });
  chart.changeData(six);


});

$('#oneYear').click(e => {
  const year  = data.slice(oneYear);
  isForward = (year.length > lastData.length);
  lastData = year;
  chart.scale('reportDateTimestamp', {
    type: 'timeCat',
    mask: 'YYYY-MM'
  });
  chart.changeData(year);


});

let zeroY;

  F2.Animate.registerAnimation('lineUpdate', function(updateShape, animateCfg, coord) {
    const cacheShape = updateShape.get('cacheShape'); // 该动画 shape 的前一个状态
    const cacheAttrs = cacheShape.attrs; // 上一个 shape 属性
    const geomType = cacheShape.geomType; // 图形类型

    const oldPoints = cacheAttrs.points; // 上一个状态的关键点
    const newPoints = updateShape.attr('points'); // 当前 shape 的关键点

    const oldLength = oldPoints.length;
    const newLength = newPoints.length;
    let deltaLength = (geomType === 'area') ? (oldLength - newLength) / 2 : (oldLength - newLength);
    // 对比前后状态进行补点
    if (deltaLength > 0 ) {
      const firstPoint = newPoints[0];
      const lastPoint = newPoints[newPoints.length - 1];

      for (let i =0; i< deltaLength; i++) {
        newPoints.splice(0, 0, firstPoint);
      }

      if (geomType === 'area') { // 对于区域图，关键点还包含底边，点的个数同顶边相同，所以上面会除以一半，绘制顺序是先绘制顶边再绘制底边，按照顺时针
        for (let i = 0; i< deltaLength; i++) {
          newPoints.push(lastPoint);
        }
      }

    } else {
      deltaLength = Math.abs(deltaLength);
      const firstPoint = oldPoints[0];
      const lastPoint = oldPoints[oldPoints.length - 1];

      for (let i =0; i< deltaLength; i++) {
        oldPoints.splice(0, 0, firstPoint);
      }

      if (geomType === 'area') {
        for (let i =0; i< deltaLength; i++) {
          oldPoints.push(lastPoint);
        }
      }

      cacheAttrs.points = oldPoints;
    }
    updateShape.attr(cacheAttrs);
    updateShape.animate().to({
      attrs: {
        points: newPoints
      },
      duration: 800,
      easing: animateCfg.easing
    });
  });


$.getJSON('./data/3nian.json', json => {
    const source = [];
    let i = 0;
    json.map(obj => {
        i++;
        if (obj.reportDate === "2018-01-02") {
          oneMonth = i;
        } else if (obj.reportDate === "2017-11-01") {
          threeMonth = i;
        } else if (obj.reportDate === "2017-08-01") {
          sixMonth = i;
        } else if (obj.reportDate === "2017-01-03") {
          oneYear = i;
        }
        // obj.value = obj.value * 1;
        source.push(obj);
    });
    data = source;
    let t = performance.now();
    chart = new F2.Chart({
      id: 'mountNode',
      width: 375,
      height: 200,
      pixelRatio: window.devicePixelRatio,
      padding: [ 'auto', 40 ]
    });
    lastData = data.slice(oneMonth);
    chart.source(data.slice(oneMonth), {
      reportDateTimestamp: {
        type: 'timeCat',
        mask: 'MM-DD'
      },
      rate: {
        formatter: rate => `${(rate * 100).toFixed(1)}%`,
        tickCount: 5
      }
    });
    chart.animate({
      line: false,
      area: {
        update: false
      },
      'axis-label': {
        enter: {
          animation: function(shape, animateCfg, coord) {
            if (!zeroY) {
              zeroY = chart.getPosition({
                reportDateTimestamp: '2018-01-18',
                rate: 0
              }).y;

              if (zeroY > coord.y.start) {
                zeroY = coord.y.start;
              }

              if (zeroY < coord.y.end) {
                zeroY = coord.y.end
              }
            }
            const id = shape._id;
            if (id.indexOf('axis-y0') > -1) {
              const actualY = shape.attr('y');
              const startY = coord.y.start;
              const endY = coord.y.end;
              shape.attr('fillOpacity', 0.1);
              // if (actualY > zeroY) {
                shape.attr('y', zeroY)
                shape.animate().to({
                  attrs: {
                    y: actualY,
                    fillOpacity: 1
                  },
                  duration: 800,
                  easing: animateCfg.easing
                })
              // } else {

              // }
            } else if (id.indexOf('axis-x') > -1) {
              if (isForward) {

                const startX = coord.x.start - 10;
                const actualX = shape.attr('x');

                shape.attr('x', startX);
                shape.attr('fillOpacity', 0.1);
                shape.animate().to({
                  attrs: {
                    x: actualX,
                    fillOpacity: 1
                  },
                  duration: 800,
                  easing: animateCfg.easing
                });
              } else {
                const startX = coord.x.end + 10;
                const actualX = shape.attr('x');

                shape.attr('x', startX);
                shape.attr('fillOpacity', 0.1);

                shape.animate().to({
                  attrs: {
                    x: actualX,
                    fillOpacity: 1
                  },
                  duration: 800,
                  easing: animateCfg.easing
                });
              }
            }
          },
        },
        update: {
          animation: function(shape, animateCfg, coord) {
            const id = shape._id;

            const cacheShape = shape.get('cacheShape'); // 该动画 shape 的前一个状态
            const cacheAttrs = cacheShape.attrs;
            const actualX = shape.attr('x');
            const actualY = shape.attr('y');

            if (id.indexOf('axis-y0') > -1) {
              shape.attr('y', cacheAttrs.y);

              shape.animate().to({
                attrs: {
                  y: actualY
                },
                duration: 800,
                easing: animateCfg.easing
              })

            } else if (id.indexOf('axis-x') > -1) {
              shape.attr('x', cacheAttrs.x);

              shape.animate().to({
                attrs: {
                  x: actualX
                },
                duration: 800,
                easing: animateCfg.easing
              })
            }
          }
        },
        // leave() {
        //   return function(shape, animateCfg, coord) {
        //     shape.animate().to({
        //       attrs: {
        //         fillOpacity: 0
        //       },
        //       duration: 200,
        //       easing: animateCfg.easing
        //     }).onEnd(() => {
        //       shape.destroy();
        //     });
        //   }
        // }
      }
    });
    chart.legend({
      showTitle: true
    });

    chart.line({
      sortable: false
    }).position('reportDateTimestamp*rate');
    chart.area({
      sortable: false
    }).position('reportDateTimestamp*rate');
    chart.render();
  });
</script>
</body>
</html>
